﻿<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="utf-8">
    <style>
        body {
            margin: 0px;
            background-color: #000000;
            overflow: hidden;
        }
    </style>
</head>

<body>

    <script src="../chapter1/js/three.js"></script>

    <script>

        var camera, scene, renderer;
        var mesh;

        init();
        animate();

        function init() {

            renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);
            //
            camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
            camera.position.z = 400;
            scene = new THREE.Scene();


            var geometry = new THREE.PlaneGeometry(500, 300, 10, 20);

            // 纹理坐标怎么弄
            var texture = THREE.ImageUtils.loadTexture("textures/a.jpg", null, function (t) {
            });
            var material = new THREE.MeshBasicMaterial({ map: texture });
            var mesh = new THREE.Mesh(geometry, material);
            mesh.name = "bbb"
            scene.add(mesh);
            console.log(scene.getObjectByName('bbb'))

            //
            window.addEventListener('resize', onWindowResize, false);

        }

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }

    </script>

</body>

</html>